<!DOCTYPE html>
<html lang="en">
<head>
  <title>LIAO</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  <script>
$(document).ready(function(){

    
	$("#searchButton").click(function(){
	
	var usrip=$("#searchBox").val();
	 //alert(usrip);
		$.ajax({url:"https://api.douban.com/v2/movie/top250",
		dataType:"jsonP",
		success:function(result){
		var i=0;
		if(usrip!='')
		for (i=0;i<result.subjects.length;i++)
		{
		if(result.subjects[i].title.indexOf(usrip)>-1)
		
		//alert(result.subjects[i].title);

		
		{var imgUrl=result.subjects[i].images.small;
		//alert(imgUrl);
		var img=$("#imgOne");
		img.attr('src',imgUrl);
		}
		
        if(result.subjects[i].title.indexOf(usrip)>-1)
		{var titleUrl=result.subjects[i].title;
		var title=$("#titleOne").html(result.subjects[i].title);
		}
		
		if(result.subjects[i].title.indexOf(usrip)>-1)
		{var nameUrl=result.subjects[i].original_title;
		var title=$("#nameOne").html(result.subjects[i].original_title);
		}
		
		
	           //$("#div1").html(result.subjects[1].title);
		}	
		}});
	});
});
</script>
  
  <style>
  .fakeimg {
      height: 200px;
      background: #aaa;
  }
  </style>
  
    <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
  
  

</head>
<body>

<!--导航栏设计框架-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Liao</a>
  <!-- Links -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><!--折叠式导航栏-->
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">联系</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about.html">关于</a>
    </li>
	<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
       你好
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Hello</a>
        <a class="dropdown-item" href="#">World</a>
        <a class="dropdown-item" href="#">Goodnight</a>
      </div>
    </li>
  </ul>
  </div>

</nav>


<!--轮播-->
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bootstrap-4.3.1/css/221.jpg">
	  <div class="carousel-caption">
        <h3>我们这是在哪</h3>
        <p>WHRER WE WERE</p>
    </div>
	</div>
    <div class="carousel-item">
      <img src="bootstrap-4.3.1/css/222.jpg">
	  <div class="carousel-caption">
        <h3>秘密的地方</h3>
        <p>THE SECRET PLACE</p>
    </div>
	</div>
    <div class="carousel-item">
      <img src="bootstrap-4.3.1/css/223.jpg">
	  <div class="carousel-caption">
        <h3>世界之巅</h3>
        <p>TOP OF THE WORLD</p>
    </div>
  </div>
  </div>
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>


<!--主体内容设计框架-->
<div class="container" style="margin-top:30px; margin-bottom:30px;">
  <div class="row">

  	<div class="col-sm-6" style="margin-top:50px;">
	<h2>关于我</h2>
      <h5>我的照片:</h5>
      <img src="bootstrap-4.3.1/css/8.jpg" class="img-fluid" alt="Chania">  <!--我的照片插图-->
      <p>关于我的介绍..</p>
	
	</div>
  
    <div class="col-sm-6">
	<!--搜索栏-->
    <form class="form-inline">
	<div>
    <input id="searchBox" class="form-control" type="text" placeholder="Hello World">
	</div>
    <button id="searchButton" class="btn btn-outline-dark" type="button">Search</button>
     </form>
      <h2 id="titleOne">速度与激情</h2>
      <h5 id="nameOne">Fast & Furious</h5>
      <img id="imgOne" src="bootstrap-4.3.1/css/331.jpg" class="img-fluid" alt="Chania">  <!--副标题下插图-->

	</div>



</div>
</div>
<!--底部设计框架-->
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>LIAO (C) 2019</p>
</div>

</body>
</html>